<!--
 	* @author  gaohailan
-->
<template>
  <div id="workerStudyEdit">
    <div class="main-title">查看/确认合理化建议</div>
    <el-form
      ref="baseForm"
      v-loading="formloading"
      :model="baseForm"
      :rules="baseRules"
      class="dataForm"
      label-position="right"
      label-width="140px"
    >
      <el-form-item label="改善名称" prop="name">
        <el-input v-model="baseForm.name" style="width: 100%" disabled />
      </el-form-item>
      <el-form-item label="类别" prop="category">
        <span>{{
          this.baseForm.category == 1
            ? '生产经营'
            : this.baseForm.category == 2
            ? '管理'
            : this.baseForm.category == 3
            ? '安全'
            : this.baseForm.category == 4
            ? '职工教育'
            : this.baseForm.category == 5
            ? '党建及精神文明建设'
            : '生活福利'
        }}</span>
      </el-form-item>
      <el-form-item label="建议人" prop="advicePeople">
        <el-input v-model="baseForm.advicePeople" style="width: 90%" disabled />
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input v-model="baseForm.phoneNumber" style="width: 90%" disabled />
      </el-form-item>
      <el-form-item label="所在单位及部门" prop="jobs">
        <el-input v-model="baseForm.jobs" style="width: 90%" disabled />
      </el-form-item>
      <el-form-item label="问题现状" prop="problemActuality">
        <el-input
          v-model="baseForm.problemActuality"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          disabled
        />
      </el-form-item>
      <el-form-item label="改善方案" prop="improvedSolution">
        <el-input
          v-model="baseForm.improvedSolution"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          disabled
        />
      </el-form-item>
      <el-form-item label="受理人" prop="acceptPerson">
        <el-input v-model="baseForm.acceptPerson" style="width: 90%" disabled />
      </el-form-item>
      <el-form-item label="图片补充" prop="improvedSolution">
        <div class="custom-uploader">
          <div
            v-for="(item, index) in picture"
            :key="index"
            style="margin-bottom: 10px; display: flex; align-items: center"
          >
            <img v-if="item != ''" :src="view + item" class="avatar" />
          </div>
        </div>
      </el-form-item>
      <el-form-item
        v-if="$route.query.a == 1 && baseForm.acceptState == 4"
        label="原因"
        prop="reason"
      >
        <el-input
          v-model="baseForm.reason"
          type="textarea"
          :rows="3"
          :disabled="checktrue"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item
        v-if="$route.query.a == 1 && baseForm.acceptState == 3"
        label="受理情况"
        prop="acceptSituation"
      >
        <el-input
          v-model="baseForm.acceptSituation"
          type="textarea"
          :rows="3"
          disabled
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item
        v-if="$route.query.a == 1 && baseForm.acceptState == 3"
        label="受理信息补充"
        prop="indexUrl"
      >
        <div v-if="bcpicture != '' || bcpicture != []" class="custom-uploader">
          <div
            v-for="(item, index) in bcpicture"
            :key="index"
            style="margin-bottom: 10px; display: flex; align-items: center"
          >
            <img v-if="item != ''" :src="view + item" class="avatar" />
          </div>
        </div>
      </el-form-item>
      <el-form-item
        v-if="$route.query.a == 0"
        label="是否公示"
        prop="publicity"
      >
        <el-radio-group v-model="baseForm.publicity">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="common-btns">
      <el-button style="padding: 8px 30px" @click="cancel">取消</el-button>
      <el-button
        v-if="$route.query.a == 0"
        style="padding: 8px 30px"
        type="primary"
        @click="updateDatas()"
        >受理完成
      </el-button>
    </div>
  </div>
</template>

<script>
// import { getUserList } from '@/api/usermanage/enterpriseuser'
import { specialText, int, doubleNum } from '@/utils/validate'
// import { acceptComplete, rationalizationView } from '@/api/reasonable/index'
// import { getUserInfo } from '@/api/login'
import { getToken } from '@/utils/auth'
import ImageCropper from '@/components/ImageCropper'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import waves from '@/directive/waves' // Waves directive

export default {
  name: 'Improves',
  components: { ImageCropper, Pagination },
  directives: { waves },
  data() {
    return {
      bcpicture: [],
      checktrue: false,
      examineState: 0,
      view: '/API-RESOURCE/webView?fid=',
      state: 'create',
      formloading: false,
      imagecropperKey: 0,
      id: '',
      imgcropIndexShow: false, // 封面上传窗口
      infoUrlArr: [], // 图片
      baseForm: {
        id: '',
        name: '',
        category: '',
        advicePeople: '',
        phoneNumber: '',
        jobs: '',
        problemActuality: '',
        improvedSolution: '',
        type: 0,
        strTime: '',
        endTime: '',
        state: 0,
        acceptState: 4,
        examinePeople: 0,
        fid: '', // 图片
        acceptSituation: '', // 受理情况
        reason: '', // 原因
        publicity: 0,
        acceptPerson: ''
      },
      picture: [],
      userInfo: {},
      baseRules: {},
      uploadaction: '/API-RESOURCE/upload/uploadFile',
      uploadHeaders: { ttsxAuthToken: getToken() },
      view: '/API-RESOURCE/webView?fid=',
      dialogMultipleSelection: '',
      dialogFormVisibleUser: false,
      dialogListLoading: false,
      dialogList: [],
      acceptInformationSupplement: '',
      dialogTotal: 0,
      dialogListQuery: {
        page: 1,
        limit: 8
      },
      listQuery: {
        page: 1,
        limit: 10,
        userName: ''
      },
      dialogsearch: {
        userName: '',
        realName: '',
        phoneNumber: '',
        orgName: ''
      }
    }
  },
  created() {
  /*  this.id = this.$route.query.id || ''
    this.etInfo()
    if (this.id) {
      this.baseForm = JSON.parse(localStorage.getItem('rowData'))
      this.bcpicture =
        (this.baseForm.acceptInformationSupplement &&
          this.baseForm.acceptInformationSupplement.split(',')) ||
        ''
      console.log(this.bcpicture)
      this.picture = this.baseForm.picture.split(',')
      console.log(this.picture)
    }
    this.getDialogLists()*/
  },
  methods: {
    getDialogLists(obj) {
      this.dialogListLoading = true
      var query = {
        page: obj ? obj.page : this.dialogListQuery.page,
        pageSize: obj ? obj.limit : this.dialogListQuery.limit,
        id: this.id
      }
      return new Promise((resolve, reject) => {
        rationalizationView(query)
          .then((response) => {
            console.log(response, 'li')
            this.baseForm = response.data.data
            this.baseForm.publicity = ''
            console.log(this.baseForm, '112')
          })
          .catch((error) => {
            reject(error)
            this.dialogListLoading = false
          })
      })
    },
    etInfo() {
      return new Promise((resolve, reject) => {
        getUserInfo().then((res) => {
          this.userInfo = res.data.data
          console.log(this.userInfo, '123')
        })
      })
    },
    /*
     * 搜索添加用户列表
     */
    dialoghandleFilter() {
      this.getDialogList()
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件,确保只能选中一项数据
    select(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) return
      this.$refs.multipleTable.toggleRowSelection(row, true)
    },
    dialogHandleSelectionChange(arr) {
      this.dialogMultipleSelection = []
      console.log('111', arr[arr.length - 1])
      this.dialogMultipleSelection.push(arr[arr.length - 1])
    },

    insertUser() {
      if (this.dialogMultipleSelection.length > 0) {
        this.dialogFormVisibleUser = false
        this.userInfo = this.dialogMultipleSelection[0]
      } else {
        this.$message({
          message: '请选择用户！',
          type: 'warning'
        })
      }
    },
    removeUser(item, index) {
      this.dialogMultipleSelection = []
    },
    addUser() {
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.dialogListQuery.page = 1
      this.dialogFormVisibleUser = true
      this.getDialogList()
    },
    getDialogList(obj) {
      this.dialogListLoading = true
      var query = {
        page: obj ? obj.page : this.dialogListQuery.page,
        pageSize: obj ? obj.limit : this.dialogListQuery.limit,
        userName: this.dialogsearch.userName,
        realName: this.dialogsearch.realName,
        phoneNumber: this.dialogsearch.phoneNumber,
        orgName: this.dialogsearch.orgName
      }
      return new Promise((resolve, reject) => {
        getUserList(query)
          .then((response) => {
            console.log(response, 'li')
            this.dialogList = response.data.data.rows
            this.dialogTotal = response.data.data.total
            this.dialogListLoading = false
          })
          .catch((error) => {
            reject(error)
            this.dialogListLoading = false
          })
      })
    },
    // 删除图片
    delInfoUrl(item, index) {
      this.infoUrlArr.splice(index, 1)
    },

    // 是否受理
    agreeChange(value) {
      console.log(value, '111')
      if (value == 4) {
        this.examineState = 0 // 不受理
      } else {
        this.examineState = 1 // 受理且本人
      }
    },
    // 受理人是否为本人
    agreePeopleChange(value) {
      if (value == 0) {
        this.examineState = 1 // 受理且本人
      } else {
        this.examineState = 2 // 受理且非本人
      }
    },
    close() {
      this.imgcropIndexShow = false
    },
    createData() {
      this.$refs['baseForm'].validate((valid) => {
        if (valid) {
          const postData = Object.assign({}, this.baseForm)
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.1)'
          })
          return new Promise((resolve, reject) => {
            SuggestActiveInsert(postData)
              .then(() => {
                loading.close()
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 1500
                })
                this.$router.push({
                  path: '/reasonable/index',
                  name: 'ReasonableMain'
                })
              })
              .catch((error) => {
                reject(error)
                loading.close()
              })
          })
        }
      })
    },
    updateDatas() {
      this.$refs['baseForm'].validate((valid) => {
        if (valid) {
          const postData = Object.assign({}, this.baseForm)
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.1)'
          })
          const params = {
            id: this.baseForm.id,
            acceptState: 3,
            publicity: this.baseForm.publicity
          }
          return new Promise((resolve, reject) => {
            acceptComplete(params)
              .then(() => {
                loading.close()

                this.$router.push({
                  path: '/reasonable/improveIndex',
                  name: 'improveIndex'
                })
              })
              .catch((error) => {
                reject(error)
                loading.close()
              })
          })
        }
      })
    },
    cancel() {
      this.$router.push({
        path: '/reasonable/improveIndex',
        name: 'improveIndex'
      })
    }
  }
}
</script>

<style lang="scss">
$mainColor: #18a5fd;

.el-select .el-input {
  width: 150px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

#workerStudyEdit {
  background-color: #fff;
  padding: 40px;
  padding-top: 20px;
  .main-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      background-color: $mainColor;
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }
  .dataForm {
    width: 800px;
    margin: 20px auto 0;
  }
  .common-btns {
    text-align: center;
  }
  .select-data {
    display: inline-block;
    background: rgba(246, 246, 246, 1);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    padding: 0 10px;
    margin-right: 5px;
    i {
      cursor: pointer;
      padding-left: 5px;
    }
  }
  .selectbtn {
    display: inline-block;
    width: 120px;
    background: rgba(255, 255, 255, 1);
    border: 1px dotted $mainColor;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: $mainColor;
    text-align: center;
    cursor: pointer;
  }
}
</style>
